<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>科泰聊天室</title>
        <link href="css/chat.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    </head>

    <body>
        <!-- TODO 根据HTML结构分析，定义出父组件和子组件结构 -->
        <div id="app">
            <h1 class="title center">科泰聊天室</h1>
            <news-list></news-list>
        </div>

        <!-- 父组件 -->
        <template id="news-list-template">
            <div class="chat-window center">
                
                <div class="chat-messages">
                    <div v-for="msg in messages" :class="['message', msg.type === 'received' ? 'received-message' : 'sent-message']" @transmit="send">
                        <div class="message-received">
                            <img :src="msg.avatar" class="avatar" v-show="msg.type === 'received'">
                            <span class="message-content">{{msg.content}}</span>
                            <img :src="msg.avatar" class="avatar" v-show="msg.type === 'sent'">
                        </div>
                    </div>
                </div>
                
                <news-item @transmit="send"></news-item>
            </div>
        </template>

        <!-- 子组件 -->
        <template id="news-item-template">
            <div class="chat-input">
                <input type="text" placeholder="请输入消息..." v-model="newMsg">
                <button @click="danJi()" >发送</button>
            </div>
        </template>

        <script src="js/vue.js"></script>
        <script>
            // TODO 根据HTML结构分析，定义出父组件和子组件结构
            //子组件
            var newsitem = {
                //通过选择器指向组件的模板
                template: "#news-item-template",
                //属性 (定义一个变量)
                props: ["newMsg"],
                methods: {
                    danJi() {
                        //调用父组件的方法
                        this.$emit("transmit",this.newMsg)
                        this.newMsg = ''
                    }
                }
            }

            //父组件
            var newsList = {
                //通过选择器指向组件的模板
                template: "#news-list-template",
                components: {
                    //注册子组件
                    "news-item": newsitem
                },
                data() {
                    return {
                        messages: [
                            {
                                "type": "received",
                                "avatar": "images/avt-01.png",
                                "content": "李旭小畜生早！"
                            },
                            {
                                "type": "sent",
                                "avatar": "images/avt-02.png",
                                "content": "是啊，好早"
                            },
                            {
                                "type": "received",
                                "avatar": "images/avt-01.png",
                                "content": "最近怎么样？"
                            }
                        ]
                    }
                },
                methods: {
                    send(value) {
                        this.messages.push({
                            "type": "sent",
                            "avatar": "images/avt-02.png",
                            "content": value
                        })
                    }
                }
            }
            
            // 创建 Vue 实例，并将父组件注册到 Vue 实例中
            const app = new Vue({
                el: "#app",
                components: {
                    //注册父组件
                    "news-list": newsList
                }
            })
        </script>
    </body>

</html>